<template>
  <div class="expert-container">
    <!--  头部查询框-->
    <el-card class="expert-select" shadow="never">
      <div class="expert-inputBar">
        <!--    输入框-->
        <div class="select-input">
          专家名：
          <el-input placeholder="请输入专家名关键字" v-model="expertParam.expertName" clearable size="small"
                    class="expert-message"/>
          性别：
          <el-select placeholder="请选择专家性别" v-model="expertParam.expertSex" clearable size="small"
                     class="expert-message" @change="this.handleQuery">
            <el-option v-for="item in sexOption" :key="item.value" :value="item.value" :label="item.label">
              {{ item.label }}
            </el-option>
          </el-select>
          专家职称：
          <el-input placeholder="请输入职称关键字" v-model="expertParam.expertTitle" clearable size="small"
                    class="expert-message"/>
          专家学历：
          <el-input placeholder="请输入学历关键字" v-model="expertParam.expertEducation" clearable size="small"
                    class="expert-message"/>
          专家分类：
          <el-cascader placeholder="请选泽专家分类" clearable
                       v-model="expertParam.expertCategory"
                       :show-all-levels="false"
                       class="expert-message"
                       filterable
                       :props="props"
                       size="small"
                       ref="cascaderHandle"
                       @change="handleQuery"
          ></el-cascader>
          专家单位：
          <el-input placeholder="请输入单位关键字" v-model="expertParam.expertUnit" clearable size="small"
                    class="expert-message"/>

          <!--    查询按钮-->
          <el-button size="small" type="primary" class="expert-select-button" icon="el-icon-search"
                     @click="handleQuery">查 询
          </el-button>
        </div>
      </div>

    </el-card>
    <!--  表格区域-->
    <el-card class="expert-table-container" shadow="never" v-loading="loading">
      <div class="expert-table-button">
        <el-button type="primary" size="mini" @click="openAddExpertPage">+添加</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteExpert('批量',null)">批量删除</el-button>
      </div>
      <el-table border stripe fit :data="expertTableData" :cell-style="rowStyle"
                :header-cell-style="rowStyle" @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="55px"></el-table-column>
        <el-table-column label="专家姓名" prop="expertName"></el-table-column>
        <el-table-column label="性别" prop="expertSex" width="60px">
          <template v-slot="scope">
            {{ scope.row.expertSex === 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column label="专家分类" prop="expertCategoryName" show-overflow-tooltip>
          <template v-slot="scope">
            <el-tag>{{ scope.row.expertCategoryName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="expertPhone" show-overflow-tooltip></el-table-column>
        <el-table-column label="邮箱" prop="expertEmail" show-overflow-tooltip></el-table-column>
        <el-table-column label="学历" prop="expertEducation" show-overflow-tooltip></el-table-column>
        <el-table-column label="职称" prop="expertTitle" show-overflow-tooltip></el-table-column>
        <el-table-column label="单位" prop="expertUnit" show-overflow-tooltip></el-table-column>
        <el-table-column label="评分" prop="expertScore" width="180px">
          <template v-slot="scope">
            <el-rate v-model="scope.row.expertScore===null?5:scope.row.expertScore" disabled show-score
                     text-color="#ff9900" :max=5>
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="openShowExpertDialog(scope.row.id)">查看</el-button>
            <el-button type="text" size="mini" @click="openEditExpertDialog(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" style="color: red" @click="handleDeleteExpert('one',scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 10, 20,50,100]" :page-size="this.pageSize" :current-page="this.page"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     class="expert-pagination">
      </el-pagination>
    </el-card>
    <AddExpert/>
    <EditExpert/>
    <ShowExpert/>
  </div>
</template>


<script>
// 引入样式
import store from '@/store'
import AddExpert from '@/components/expert/AddExpert.vue'
import EditExpert from '@/components/expert/EditExpert.vue'
import ShowExpert from '@/components/expert/ShowExpert.vue'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { DeleteCategoriesApi, GetCategoryByParentAndLevelApi } from '@/request/category/category-api'
import expert from '@/views/information/Expert.vue'
import { DeleteExpertsApi, GetExpertPageApi } from '@/request/expert/expert-api'

export default {
  components: {
    AddExpert,
    EditExpert,
    ShowExpert
  },
  created () {
    this.expertInit()
  },
  data () {
    return {
      sexOption: [{
        'value': '0',
        'label': '女'
      }, {
        'value': '1',
        'label': '男'
      }],
      expertParam: {
        expertName: null,
        expertSex: null,
        expertTitle: null,
        expertEducation: null,
        expertUnit: null,
        expertCategory: null
      },
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      loading: false,
      expertTableData: [],
      checkList: [],
      props: {
        lazy: true,
        checkStrictly: true,
        async lazyLoad (node, resolve) {
          let { level } = node
          //调用接口
          let res = await GetCategoryByParentAndLevelApi(node.value ? node.value : 0, level)
          if (res) {
            const nodes = res.data.map(item => (
                {
                  value: item.id,
                  label: item.categoryCode + ' ' + item.categoryName,
                  leaf: level >= 2
                }
            ))
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }
        }
      },
    }
  },
  methods: {
    async expertInit () {
      //初始化分页查询的参数
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        expertName: this.expertParam.expertName ? this.expertParam.expertName : undefined,
        expertSex: this.expertParam.expertSex ? parseInt(this.expertParam.expertSex) : undefined,
        expertTitle: this.expertParam.expertTitle ? this.expertParam.expertTitle : undefined,
        expertUnit: this.expertParam.expertUnit ? this.expertParam.expertUnit : undefined,
        expertCategory: this.expertParam.expertCategory ? this.expertParam.expertCategory[0] : undefined,
        expertEducation: this.expertParam.expertEducation ? this.expertParam.expertEducation : undefined,
      }
      let res = await GetExpertPageApi(params)
      if (res.code === 200) {
        this.expertTableData = res.data.records || []
        this.counts = res.data.total
        this.loading = false
      } else {
        this.$message.error('查询专家信息失败')
        this.loading = false
      }
    },
    openAddExpertPage () {
      store.commit('ExpertEdit/changeAddExpertSync', true)
    },
    openShowExpertDialog (id) {
      store.commit('ExpertEdit/changeShowExpertId', id)
      store.commit('ExpertEdit/changeShowExpertSync', true)
    },
    openEditExpertDialog (id) {
      store.commit('ExpertEdit/changeEditExpertId', id)
      store.commit('ExpertEdit/changeEditExpertSync', true)
    },
    handleDeleteExpert (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$notify.warning({
            title: '警告',
            message: '请选择删除内容！'
          })
        }
      }
      //重新提示是否删除
      this.$confirm('删除专家信息将同步删除对应用户，是否继续？', '确认删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        //确认是单删还是批量删除
        let ids = (type === '批量') ? this.checkList.join(',') : id
        let res = await DeleteExpertsApi(ids)
        if (res.code === 200) {
          //删除成功后的逻辑
          this.handleQuery()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message.info('取消删除')
        } else {
          this.$message.error('未知错误！')
        }
      })
    },
    // pageSize切换
    handleSizeChange (val) {
      this.pageSize = val
      this.expertInit()
    },
    // 当前页面切换
    handleCurrentChange (val) {
      this.page = val
      this.expertInit()
    },
    rowStyle () {
      return 'text-align:center'
    },   //处理多选
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
    handleQuery () {
      this.expertParam.page = 1
      this.expertInit()
    }
  }
}
</script>
<style scoped lang="less">
.expert-container {

  .expert-select {
    margin-bottom: 10px;

    .expert-inputBar {
      font-size: 14px;

      .select-input {
        .expert-message {
          max-width: 150px;
          margin-right: 20px;
        }
      }
    }
  }

  .expert-table-container {
    .expert-table-button {
      float: right;
      margin: 10px 0 10px 10px;
    }

    .expert-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}
</style>
